<!-- 插入/删除节点、前进回退 -->
<script setup>
import { ref, onMounted, shallowRef } from 'vue'
import MindMap from 'simple-mind-map'

let mindMap = null

// 记录前进回退
const isStart = ref(true)
const isEnd = ref(true)
const clickCount = ref(0)
const childList = ref([
  {
    data: {
      uid: 'ehsGcHMuoC5oQcx8xMeqsj',
      text: 'topic0',
      is_dir: true,
      expand: false
    },
    children: [
      {
        data: {
          uid: 'TksjZVkuuQQ85Cka86hnWp',
          text: 'topic00',
          expand: false,
          is_dir: true
        },
        children: []
      },
      {
        data: {
          uid: '2KPjRHG777cpzYDxZNp9iA',
          text: 'topic01',
          expand: false,
          is_dir: true
        },
        children: []
      },
      {
        data: {
          uid: '8v35UFXztjo6EPJJiBQ2NP',
          text: 'topic02',
          expand: false,
          is_dir: true
        },
        children: []
      },
      {
        data: {
          uid: 'cd7SANDgu6Q7MbmhCVqbuD',
          text: 'topic03',
          expand: false,
          is_dir: true
        },
        children: []
      },
      {
        data: {
          uid: 'APNCoUcTX2oLB6F3TL7GMT',
          text: 'topic04',
          expand: false,
          is_dir: true
        },
        children: []
      }
    ]
  },
  {
    data: {
      uid: 'MQuLyC6rnuEgMfheZpsChm',
      text: 'topic1',
      is_dir: true,
      expand: false
    },
    children: [
      {
        data: {
          uid: 'mrmeb2yA6Gx5ejW3nEZUcw',
          text: 'topic10',
          expand: false,
          is_dir: true
        },
        children: []
      },
      {
        data: {
          uid: 'CvpTUR8bYBpoTRhSMx9kvq',
          text: 'topic11',
          expand: false,
          is_dir: true
        },
        children: []
      },
      {
        data: {
          uid: 'NCeM7wrrNLx9aMQimx3DPz',
          text: 'topic12',
          expand: false,
          is_dir: true
        },
        children: []
      },
      {
        data: {
          uid: 'gkfmBw6pFHJttQkknKLh3G',
          text: 'topic13',
          expand: false,
          is_dir: false
        },
        children: []
      },
      {
        data: {
          uid: '4sbSXWbrWNmnaTFsNnBFNJ',
          text: 'topic14',
          expand: false,
          is_dir: true
        },
        children: []
      },
      {
        data: {
          uid: 'PF8b4KTBpyCfWoeSP74xP8',
          text: 'topic15',
          expand: false,
          is_dir: true
        },
        children: []
      },
      {
        data: {
          uid: 'Uuo3moKZd69iVVgJc6QFaZ',
          text: 'topic16',
          expand: false,
          is_dir: true
        },
        children: []
      }
    ]
  },
  {
    data: {
      uid: 'WmXrfMeGVoh8oAXcTxYFai',
      text: 'topic2',
      is_dir: true,
      expand: false
    },
    children: []
  },
  {
    data: {
      uid: 'W6VxyrcGrLj22LwfwqfbCu',
      text: 'topic3',
      is_dir: true,
      expand: false
    },
    children: [
      {
        data: {
          uid: 'SyniZuV8gqFUpr3dsmuFKW',
          text: 'topic30',
          expand: false,
          is_dir: true
        },
        children: []
      },
      {
        data: {
          uid: 'PyfHAJCcLcUWzUsgy38yj3',
          text: 'topic31',
          expand: false,
          is_dir: true
        },
        children: []
      },
      {
        data: {
          uid: 'dgWK3HafGZa4NbSpNAbtFj',
          text: 'topic32',
          expand: false,
          is_dir: true
        },
        children: []
      }
    ]
  },
  {
    data: {
      uid: 'kBNDCfJ5Fw5NwFRf6qy7eJ',
      text: 'topic4',
      is_dir: true,
      expand: false
    },
    children: [
      {
        data: {
          uid: 'P2NTxpEGEzDP2ZSahK37KN',
          text: 'topic40',
          expand: false,
          is_dir: true
        },
        children: []
      },
      {
        data: {
          uid: 'Y4isuHd3xbQFfAqRLsjb5g',
          text: 'topic41',
          expand: false,
          is_dir: true
        },
        children: []
      },
      {
        data: {
          uid: 'BYqi7HP4ZSX83rHWd42hES',
          text: 'topic42',
          expand: false,
          is_dir: false
        },
        children: []
      }
    ]
  }
])

// 当前激活的节点列表
const activeNodes = shallowRef([])

// 回退
const back = () => {
  mindMap.execCommand('BACK')
}

// 前进
const forward = () => {
  mindMap.execCommand('FORWARD')
}

// 插入兄弟节点
const insertNode = () => {
  mindMap.execCommand('INSERT_NODE')
}

// 插入子节点
const insertChildNode = () => {
  mindMap.execCommand('INSERT_CHILD_NODE')
}

//插入多个子节点
const insertChildListNode = () => {
  let childList = [
    {
      data: {
        uid: 'ehsGcHMuoC5oQcx8xMeqsj',
        text: 'topic0',
        is_dir: true,
        expand: false
      },
      children: [
        {
          data: {
            uid: 'TksjZVkuuQQ85Cka86hnWp',
            text: 'topic00',
            expand: false,
            is_dir: true
          },
          children: []
        },
        {
          data: {
            uid: '2KPjRHG777cpzYDxZNp9iA',
            text: 'topic01',
            expand: false,
            is_dir: true
          },
          children: []
        },
        {
          data: {
            uid: '8v35UFXztjo6EPJJiBQ2NP',
            text: 'topic02',
            expand: false,
            is_dir: true
          },
          children: []
        },
        {
          data: {
            uid: 'cd7SANDgu6Q7MbmhCVqbuD',
            text: 'topic03',
            expand: false,
            is_dir: true
          },
          children: []
        },
        {
          data: {
            uid: 'APNCoUcTX2oLB6F3TL7GMT',
            text: 'topic04',
            expand: false,
            is_dir: true
          },
          children: []
        }
      ]
    },
    {
      data: {
        uid: 'MQuLyC6rnuEgMfheZpsChm',
        text: 'topic1',
        is_dir: true,
        expand: false
      },
      children: [
        {
          data: {
            uid: 'mrmeb2yA6Gx5ejW3nEZUcw',
            text: 'topic10',
            expand: false,
            is_dir: true
          },
          children: []
        },
        {
          data: {
            uid: 'CvpTUR8bYBpoTRhSMx9kvq',
            text: 'topic11',
            expand: false,
            is_dir: true
          },
          children: []
        },
        {
          data: {
            uid: 'NCeM7wrrNLx9aMQimx3DPz',
            text: 'topic12',
            expand: false,
            is_dir: true
          },
          children: []
        },
        {
          data: {
            uid: 'gkfmBw6pFHJttQkknKLh3G',
            text: 'topic13',
            expand: false,
            is_dir: false
          },
          children: []
        },
        {
          data: {
            uid: '4sbSXWbrWNmnaTFsNnBFNJ',
            text: 'topic14',
            expand: false,
            is_dir: true
          },
          children: []
        },
        {
          data: {
            uid: 'PF8b4KTBpyCfWoeSP74xP8',
            text: 'topic15',
            expand: false,
            is_dir: true
          },
          children: []
        },
        {
          data: {
            uid: 'Uuo3moKZd69iVVgJc6QFaZ',
            text: 'topic16',
            expand: false,
            is_dir: true
          },
          children: []
        }
      ]
    },
    {
      data: {
        uid: 'WmXrfMeGVoh8oAXcTxYFai',
        text: 'topic2',
        is_dir: true,
        expand: false
      },
      children: []
    },
    {
      data: {
        uid: 'W6VxyrcGrLj22LwfwqfbCu',
        text: 'topic3',
        is_dir: true,
        expand: false
      },
      children: [
        {
          data: {
            uid: 'SyniZuV8gqFUpr3dsmuFKW',
            text: 'topic30',
            expand: false,
            is_dir: true
          },
          children: []
        },
        {
          data: {
            uid: 'PyfHAJCcLcUWzUsgy38yj3',
            text: 'topic31',
            expand: false,
            is_dir: true
          },
          children: []
        },
        {
          data: {
            uid: 'dgWK3HafGZa4NbSpNAbtFj',
            text: 'topic32',
            expand: false,
            is_dir: true
          },
          children: []
        }
      ]
    },
    {
      data: {
        uid: 'kBNDCfJ5Fw5NwFRf6qy7eJ',
        text: 'topic4',
        is_dir: true,
        expand: false
      },
      children: [
        {
          data: {
            uid: 'P2NTxpEGEzDP2ZSahK37KN',
            text: 'topic40',
            expand: false,
            is_dir: true
          },
          children: []
        },
        {
          data: {
            uid: 'Y4isuHd3xbQFfAqRLsjb5g',
            text: 'topic41',
            expand: false,
            is_dir: true
          },
          children: []
        },
        {
          data: {
            uid: 'BYqi7HP4ZSX83rHWd42hES',
            text: 'topic42',
            expand: false,
            is_dir: false
          },
          children: []
        }
      ]
    }
  ]
  mindMap.execCommand('INSERT_MULTI_CHILD_NODE', [], childList)
}

// 删除节点
const deleteNode = () => {
  mindMap.execCommand('REMOVE_NODE')
}

onMounted(() => {
  mindMap = new MindMap({
    el: document.getElementById('mindMapContainer'),
    // readonly: true,
    layout: 'mindMap',
    mousewheelAction: 'zoom', //鼠标滚轮的行为，zoom（放大缩小）、move（上下移动）
    isShowExpandNum: false, //节点收起时是否显示收起的数量
    alwaysShowExpandBtn: false, //是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示
    data: {
      data: {
        text: '根节点'
      },
      children: [
        {
          data: {
            text: '二级节点'
          },
          children: []
        },
        {
          data: {
            text: '二级节点'
          },
          children: []
        }
      ]
    },
    initRootNodePosition: ['left', 'center']
  })
  mindMap.off('node_dblclick')

  // 监听节点激活事件
  mindMap.on('node_active', (node, nodeList) => {
    activeNodes.value = nodeList
  })

  mindMap.on('node_click', (node, nodeList) => {
    if (clickCount.value <= 2) {
      insertChildListNode()
    }
    clickCount.value++
    console.log(clickCount.value)
    if (clickCount.value % 2 == 0) {
      console.log('node.show()')
      // node.show()
      node.showChildren()
    } else {
      console.log('node.hide()')
      // node.hide()
      node.hideChildren()
    }
  })

  // 前进回退事件
  mindMap.on('back_forward', (index, len) => {
    isStart.value = index <= 0
    isEnd.value = index >= len - 1
  })
})
</script>

<template>
  <div class="mindMapDemo">
    <div id="mindMapContainer"></div>
    <div class="toolbar">
      <button @click="back" v-if="!isStart">回退</button>
      <button @click="forward" v-if="!isEnd">前进</button>
      <button @click="insertNode" v-if="activeNodes.length > 0">插入兄弟节点</button>
      <button @click="insertChildNode" v-if="activeNodes.length > 0">插入子节点</button>
      <button @click="insertChildListNode" v-if="activeNodes.length > 0">插入多个子节点</button>
      <button @click="deleteNode" v-if="activeNodes.length > 0">删除节点</button>
    </div>
  </div>
</template>

<style>
/* @import "./simpleMindMap.esm.css"; */

.mindMapDemo {
  width: 100%;
  position: relative;
}

#mindMapContainer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 400px;
}

#mindMapContainer * {
  margin: 0;
  padding: 0;
}

.toolbar {
  position: absolute;
  left: 10px;
  top: 10px;
}
</style>
